Stripe Follow Along Dropdown

滑鼠移到導覽列就出現下拉選單

• 選單會隨著滑鼠移動位置變化，所以可能需要監測目前選擇的element相對位置
• 選單大小也是依照內容作變化

實作

1. 一開始需要將所有nav下所有ul下的li標籤都做選取，並監測他們的滑鼠移入移出事件

    const triggers = document.querySelectorAll(".cool > li");
    const background = document.querySelector(".dropdownBackground");
    const nav = document.querySelector("nav");
   
    triggers.forEach((trigger) => {
        trigger.addEventListener("mouseenter", handleEnter);
        trigger.addEventListener("mouseleave", handleLeave);
    });
   

2. 滑鼠移入時，計算相對位置及背景大小，在element上添加觸發的class

        this.classList.add("trigger-enter");
        setTimeout(
            () =>
                this.classList.contains("trigger-enter") &&
                this.classList.add("trigger-enter-active"),
            150
        );
        background.classList.add("open");
   
        const dropdown = this.querySelector(".dropdown");
        const dropdownCoords = dropdown.getBoundingClientRect();
        const navCoords = nav.getBoundingClientRect();
   
        const coord = {
            width: dropdownCoords.width,
            height: dropdownCoords.height,
            top: dropdownCoords.top - navCoords.top,
            left: dropdownCoords.left - navCoords.left,
        };
        background.style.setProperty("width", `${coord.width}px`);
        background.style.setProperty("height", `${coord.height}px`);
        background.style.setProperty(
            "transform",
            `translate(${coord.left}px, ${coord.top}px)`
        );
   

3. 滑鼠離開時則移除class

    function handleLeave() {
        this.classList.remove("trigger-enter", "trigger-enter-active");
        background.classList.remove("open");
    }
   

知識點

• 在 CSS 中，> 符號表示子選擇器（child selector）。當你使用 > 符號，它會選擇指定元素的直接子元素，而不包括孫子元素或更深層次的後代元素。

總結

• 學習如何利用相對位置來動態顯示element